import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import './index.css';

export default function Index() {
  const pieRef = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const pieRefA = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const pieRefB = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const pieRefC = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const renderPie = () => {
    setTimeout(() => {
      echarts.init(pieRef.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDom = document.getElementById('pie')!;
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;

      option = {
        title: {
          text: '养殖总消耗可视化',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '养殖消耗数据可视化，单位均为kg',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1000, name: '鸡饲料A' },
              { value: 1500, name: '鸡饲料B' },
              { value: 1200, name: '鸡饲料C' },
              { value: 1300, name: '垫料' },
              { value: 1500, name: '鸡饲料D' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            // magicType: {
            //   show: true,
            //   type: ['line', 'bar'],
            //   title: {
            //     line: '切换为折线图',
            //     bar: '切换为柱状图'
            //   }
            // },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      option && myChart.setOption(option);
    }, 0);

    setTimeout(() => {
      echarts.init(pieRefA.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomA = document.getElementById('pieA')!;
      var myChartA = echarts.init(chartDomA);
      var optionA: EChartsOption;

      optionA = {
        title: {
          text: 'A鸡舍的养殖消耗可视化',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '养殖消耗数据可视化，单位均为kg',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1000, name: '鸡饲料A' },
              { value: 1500, name: '鸡饲料B' },
              { value: 1200, name: '鸡饲料C' },
              { value: 1300, name: '垫料' },
              { value: 1500, name: '鸡饲料D' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            // magicType: {
            //   show: true,
            //   type: ['line', 'bar'],
            //   title: {
            //     line: '切换为折线图',
            //     bar: '切换为柱状图'
            //   }
            // },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      optionA && myChartA.setOption(optionA);
    }, 0);

    setTimeout(() => {
      echarts.init(pieRefB.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomB = document.getElementById('pieB')!;
      var myChartB = echarts.init(chartDomB);
      var optionB: EChartsOption;

      optionB = {
        title: {
          text: 'B鸡舍的养殖消耗可视化',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '养殖消耗数据可视化，单位均为kg',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1000, name: '鸡饲料A' },
              { value: 1500, name: '鸡饲料B' },
              { value: 1200, name: '鸡饲料C' },
              { value: 1300, name: '垫料' },
              { value: 1500, name: '鸡饲料D' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            // magicType: {
            //   show: true,
            //   type: ['line', 'bar'],
            //   title: {
            //     line: '切换为折线图',
            //     bar: '切换为柱状图'
            //   }
            // },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      optionB && myChartB.setOption(optionB);
    }, 0);

    setTimeout(() => {
      echarts.init(pieRefC.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomC = document.getElementById('pieC')!;
      var myChartC = echarts.init(chartDomC);
      var optionC: EChartsOption;

      optionC = {
        title: {
          text: 'C鸡舍的养殖消耗可视化',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '养殖消耗数据可视化，单位均为kg',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1000, name: '鸡饲料A' },
              { value: 1500, name: '鸡饲料B' },
              { value: 1200, name: '鸡饲料C' },
              { value: 1300, name: '垫料' },
              { value: 1500, name: '鸡饲料D' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      optionC && myChartC.setOption(optionC);
    }, 0);
  };
  useEffect(() => {
    renderPie();
  }, []);
  return (
    <div className="data-wrapper">
      <div
        ref={pieRef}
        id="pie"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      ></div>
      <div
        ref={pieRefA}
        id="pieA"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      ></div>
      <div
        ref={pieRefB}
        id="pieB"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      ></div>
      <div
        ref={pieRefC}
        id="pieC"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      ></div>
    </div>
  );
}
